<template>
	<div id="RoleManage">
		<el-button type="success"
			style="margin-bottom:20px;"
			@click="showAddNew=true"
			>添加角色</el-button>
		<table>
			<tr>
				<td>角色名字</td>
				<td>角色描述</td>
				<td>详情</td>
				<td>操作</td>
			</tr>
			<tr v-for="(item,key) in allRoles" :key="key">
				<td>{{item.roleName}}</td>
				<td>{{item.roleDesc}}</td>
				<td></td>
				<td>
					<el-button type="primary">编辑角色</el-button>
					<el-button type="danger" @click="deleteRole(item._id)">删除角色</el-button>
				</td>
			</tr>
		</table>
		<add-new-role :showAddNew="showAddNew"  />
	</div>
</template>

<script>
	import AddNewRole from './AddNewRole'
	
	export default{
		components:{AddNewRole},
		data(){
			return {
	            activeName: '2',
	            showAddNew:false,
	        }
		},
		methods:{
			deleteRole(id){
				var action=()=>{
					this.$http.post(this.$apis.deleteRole,{_id:id})
					.then((resp)=>{
						this.$message({
							message:resp.data.message,
							type:resp.data.success?"success":"danger"
						});
						if(resp.data.success){
							this.$store.dispatch('loadAllRole')
						}
					})
				}
				this.operatorConfirm(action,'删除角色');
			}
		},
		computed:{
			allRoles(){
				return this.$store.getters.allRoles;
			}
		},
		mounted(){
			this.$store.dispatch('loadAllRole')
		}
	}
</script>

<style>
	table{
		width:100%;
		border:1px solid #ccc;
		background:white;
	}
	tr{
		width:100%;
		height:50px;
	}
	td:nth-child(1),
	td:nth-child(2),
	td:nth-child(3){
		width:20%;
		text-align:center;
		line-height:50px;
		border:1px solid #ccc;
	}
	td:nth-child(4){
		text-align:center;
		line-height:50px;
		border:1px solid #ccc;
	}
</style>